<script setup lang="ts">
import { storeToRefs } from "pinia";
import appStore from "@/store";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { AVMedia } from "vue-audio-visual";
import { Camera, Microphone, VideoCamera, Refresh, Warning } from "@element-plus/icons-vue";
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';

const { interviewNewStore } = storeToRefs(appStore.useInterviewJsonStore);
const ruleFormRef = ref<FormInstance>();

// Animation state
const fadeIn = ref(false);

onMounted(() => {
  setTimeout(() => {
    fadeIn.value = true;
  }, 100);
  getAllDevices();
});

const rules = reactive<FormRules<any>>({});

const cameraDevices = ref<MediaDeviceInfo[]>([]);
const microphoneDevices = ref<MediaDeviceInfo[]>([]);
const speakerDevices = ref<MediaDeviceInfo[]>([]);

const currentMicrophoneStream = ref();
const currentCameraStream = ref();
const videoRef = ref();
const microphoneRef = ref();
const microphoneTesting = ref(false);
const deviceLoading = ref(false);

const getAllDevices = async () => {
  deviceLoading.value = true;
  cameraDevices.value = [];
  microphoneDevices.value = [];
  speakerDevices.value = [];

  try {
    await navigator.mediaDevices.enumerateDevices().then((devices: MediaDeviceInfo[]) => {
      devices.forEach(item => {
        if (item.kind === 'videoinput') {
          cameraDevices.value.push(item);
        } else if (item.kind === 'audioinput') {
          microphoneDevices.value.push(item);
        } else {
          speakerDevices.value.push(item);
        }
      });
    });
  } catch (error) {
    ElMessage.error('设备检测失败，请检查权限设置');
  } finally {
    deviceLoading.value = false;
  }
};

const setSelectedValueCamera = async (item: any) => {
  if (currentCameraStream.value) {
    stopStream(currentCameraStream.value);
  }
  currentCameraStream.value = null;

  try {
    await navigator.mediaDevices.getUserMedia({
      video: { deviceId: item.deviceId }
    }).then((stream) => {
      currentCameraStream.value = stream;
      if (videoRef.value) {
        videoRef.value.srcObject = currentCameraStream.value;
      } else {
        ElMessage.error('视频组件加载失败');
        stopStream(currentCameraStream.value);
      }
    });
  } catch (reason) {
    ElMessage.error(`摄像头访问失败: ${reason}`);
  }
};

const changeCameraSwitch = async (item: boolean) => {
  if (!item) {
    stopStream(currentCameraStream.value);
    currentCameraStream.value = null;
    if (videoRef.value && videoRef.value.srcObject) {
      videoRef.value.srcObject = null;
    }
  } else {
    interviewNewStore.value.Settings.cameraChoice = undefined;
    try {
      await navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
        stopStream(stream);
        getAllDevices();
      });
    } catch (error) {
      ElMessage.error('摄像头权限获取失败');
      interviewNewStore.value.Settings.cameraPermit = false;
    }
  }
};

const changeMicrophoneSwitch = async (item: boolean) => {
  if (!item) {
    stopStream(currentMicrophoneStream.value);
    currentMicrophoneStream.value = null;
  } else {
    interviewNewStore.value.Settings.microphoneChoice = undefined;
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
        stopStream(stream);
        getAllDevices();
      });
    } catch (error) {
      ElMessage.error('麦克风权限获取失败');
      interviewNewStore.value.Settings.microphonePermit = false;
    }
  }
};

const stopStream = (stream: MediaStream) => {
  if (stream) {
    const tracks = stream.getTracks();
    tracks.forEach((track: any) => {
      track.stop();
    });
  }
};

const startTest = async () => {
  microphoneTesting.value = true;
  if (currentMicrophoneStream.value) {
    stopStream(currentMicrophoneStream.value);
  }
  currentMicrophoneStream.value = null;

  try {
    await navigator.mediaDevices.getUserMedia({
      audio: { deviceId: interviewNewStore.value.Settings.microphoneChoice.deviceId }
    }).then((stream) => {
      currentMicrophoneStream.value = stream;
    });
  } catch (reason) {
    ElMessage.error(`麦克风测试失败: ${reason}`);
    microphoneTesting.value = false;
  }
};

const stopTest = () => {
  microphoneTesting.value = false;
  if (currentMicrophoneStream.value) {
    stopStream(currentMicrophoneStream.value);
    currentMicrophoneStream.value = null;
  }
};

onUnmounted(() => {
  if (currentCameraStream.value) {
    stopStream(currentCameraStream.value);
  }
  if (currentMicrophoneStream.value) {
    stopStream(currentMicrophoneStream.value);
  }
});

// Form completion status
const formCompletion = computed(() => {
  let completed = 0;
  let total = 3;

  if (interviewNewStore.value.Settings.cameraPermit && interviewNewStore.value.Settings.cameraChoice) completed++;
  if (interviewNewStore.value.Settings.microphonePermit && interviewNewStore.value.Settings.microphoneChoice) completed++;
  completed++; // Speaker test is always available

  return {
    percentage: Math.round((completed / total) * 100),
    completed,
    total
  };
});

const testAudio = require('@/assets/audio/testAudio.wav');
</script>

<template>
  <div class="privacy-settings-container" :class="{ 'fade-in': fadeIn }">
    <!-- Header Section -->
    <div class="settings-header">
      <div class="header-content">
        <div class="header-left">
          <h2 class="section-title">
            <el-icon class="title-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-check" viewBox="0 0 16 16">
                <path d="M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56"/>
                <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0"/>
              </svg>
            </el-icon>
            隐私设置
          </h2>
          <p class="section-description">配置摄像头、麦克风和扬声器权限</p>
        </div>
        <div class="header-right">
          <div class="completion-indicator">
            <div class="completion-circle" :style="{ '--progress': formCompletion.percentage + '%' }">
              <span class="completion-text">{{ formCompletion.percentage }}%</span>
            </div>
            <div class="completion-info">
              <span class="completion-label">完成度</span>
              <span class="completion-detail">{{ formCompletion.completed }}/{{ formCompletion.total }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Form Content -->
    <div class="form-container">
      <el-form
          label-width="auto"
          v-model="interviewNewStore.Settings"
          ref="ruleFormRef"
          :rules="rules"
          class="privacy-form"
          label-position="top"
      >
        <!-- Camera Settings Section -->
        <div class="form-section">
          <div class="section-header">
            <h3 class="section-subtitle">
              <el-icon><VideoCamera /></el-icon>
              摄像头设置
            </h3>
            <div class="section-status">
              <el-icon v-if="interviewNewStore.Settings.cameraPermit && interviewNewStore.Settings.cameraChoice" class="status-icon success">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                  <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
                </svg>
              </el-icon>
              <el-icon v-else-if="interviewNewStore.Settings.cameraPermit" class="status-icon warning">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
                  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
                </svg>
              </el-icon>
              <span class="status-text">
                {{ interviewNewStore.Settings.cameraPermit ?
                  (interviewNewStore.Settings.cameraChoice ? '已配置' : '需要选择设备') :
                  '未启用' }}
              </span>
            </div>
          </div>

          <el-row :gutter="24">
            <el-col :span="8">
              <div class="control-panel">
                <el-form-item prop="cameraPermit" class="switch-item">
                  <div class="switch-wrapper">
                    <el-icon class="device-icon"><Camera /></el-icon>
                    <div class="switch-content">
                      <span class="switch-label">启用摄像头</span>
                      <el-switch
                          v-model="interviewNewStore.Settings.cameraPermit"
                          @change="changeCameraSwitch"
                          class="custom-switch"
                      />
                    </div>
                  </div>
                </el-form-item>

                <el-button
                    type="primary"
                    @click="getAllDevices"
                    :disabled="!interviewNewStore.Settings.cameraPermit"
                    :loading="deviceLoading"
                    class="detect-button"
                >
                  <el-icon><Refresh /></el-icon>
                  重新检测设备
                </el-button>
              </div>
            </el-col>

            <el-col :span="16">
              <div class="device-section">
                <el-form-item prop="cameraChoice" class="device-select-item">
                  <label class="device-label">选择摄像头设备</label>
                  <el-select
                      v-model="interviewNewStore.Settings.cameraChoice"
                      :placeholder="cameraDevices.length === 0 ? '未检测到摄像头' : '请选择摄像头'"
                      :disabled="cameraDevices.length === 0 || !interviewNewStore.Settings.cameraPermit"
                      @change="setSelectedValueCamera"
                      class="device-select"
                  >
                    <el-option
                        v-for="(item, index) in cameraDevices"
                        :key="index"
                        :value="item"
                        :label="item.label === '' ? '默认摄像头' : item.label"
                    />
                  </el-select>
                </el-form-item>

                <div class="preview-container">
                  <div class="preview-header">
                    <span class="preview-title">摄像头预览</span>
                  </div>
                  <div class="video-wrapper">
                    <video
                        ref="videoRef"
                        autoplay
                        playsinline
                        class="video-preview"
                        :class="{ 'inactive': !interviewNewStore.Settings.cameraPermit || !interviewNewStore.Settings.cameraChoice }"
                    />
                    <div v-if="!interviewNewStore.Settings.cameraPermit" class="overlay-message">
                      <el-icon class="overlay-icon"><Camera /></el-icon>
                      <span>摄像头未启用</span>
                    </div>
                    <div v-else-if="!interviewNewStore.Settings.cameraChoice" class="overlay-message">
                      <el-icon class="overlay-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                          <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
                          <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
                        </svg>
                      </el-icon>
                      <span>请选择摄像头设备</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- Microphone Settings Section -->
        <div class="form-section">
          <div class="section-header">
            <h3 class="section-subtitle">
              <el-icon><Microphone /></el-icon>
              麦克风设置
            </h3>
            <div class="section-status">
              <el-icon v-if="interviewNewStore.Settings.microphonePermit && interviewNewStore.Settings.microphoneChoice" class="status-icon success">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                  <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
                </svg>
              </el-icon>
              <el-icon v-else-if="interviewNewStore.Settings.microphonePermit" class="status-icon warning">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>
                  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
                </svg>
              </el-icon>
              <span class="status-text">
                {{ interviewNewStore.Settings.microphonePermit ?
                  (interviewNewStore.Settings.microphoneChoice ? '已配置' : '需要选择设备') :
                  '未启用' }}
              </span>
            </div>
          </div>

          <el-row :gutter="24">
            <el-col :span="8">
              <div class="control-panel">
                <el-form-item prop="microphonePermit" class="switch-item">
                  <div class="switch-wrapper">
                    <el-icon class="device-icon"><Microphone /></el-icon>
                    <div class="switch-content">
                      <span class="switch-label">启用麦克风</span>
                      <el-switch
                          v-model="interviewNewStore.Settings.microphonePermit"
                          @change="changeMicrophoneSwitch"
                          class="custom-switch"
                      />
                    </div>
                  </div>
                </el-form-item>

                <el-button
                    type="primary"
                    @click="getAllDevices"
                    :disabled="!interviewNewStore.Settings.microphonePermit"
                    :loading="deviceLoading"
                    class="detect-button"
                >
                  <el-icon><Refresh /></el-icon>
                  重新检测设备
                </el-button>

                <div class="test-controls">
                  <el-button
                      v-if="!microphoneTesting"
                      type="success"
                      @click="startTest"
                      :disabled="!interviewNewStore.Settings.microphonePermit || !interviewNewStore.Settings.microphoneChoice"
                      class="test-button"
                  >
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                        <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/>
                      </svg>
                    </el-icon>
                    开始测试
                  </el-button>
                  <el-button
                      v-else
                      type="danger"
                      @click="stopTest"
                      class="test-button"
                  >
                    <el-icon>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                        <path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5z"/>
                      </svg>
                    </el-icon>
                    结束测试
                  </el-button>
                </div>
              </div>
            </el-col>

            <el-col :span="16">
              <div class="device-section">
                <el-form-item prop="microphoneChoice" class="device-select-item">
                  <label class="device-label">选择麦克风设备</label>
                  <el-select
                      v-model="interviewNewStore.Settings.microphoneChoice"
                      :placeholder="microphoneDevices.length === 0 ? '未检测到麦克风' : '请选择麦克风'"
                      :disabled="microphoneDevices.length === 0 || !interviewNewStore.Settings.microphonePermit || microphoneTesting"
                      class="device-select"
                  >
                    <el-option
                        v-for="(item, index) in microphoneDevices"
                        :key="index"
                        :value="item"
                        :label="item.label === '' ? '默认麦克风' : item.label"
                    />
                  </el-select>
                </el-form-item>

                <div class="audio-visualizer-container">
                  <div class="visualizer-header">
                    <span class="visualizer-title">音频可视化</span>
                    <span class="visualizer-status" :class="{ 'active': microphoneTesting }">
                      {{ microphoneTesting ? '正在测试...' : '未测试' }}
                    </span>
                  </div>
                  <div class="visualizer-wrapper">
                    <a-v-media
                        ref="microphoneRef"
                        type="frequ"
                        frequ-direction="mo"
                        :media="currentMicrophoneStream"
                        class="audio-visualizer"
                    />
                    <div v-if="!microphoneTesting" class="visualizer-overlay">
                      <el-icon class="overlay-icon"><Microphone /></el-icon>
                      <span>点击"开始测试"查看音频波形</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- Speaker Settings Section -->
        <div class="form-section">
          <div class="section-header">
            <h3 class="section-subtitle">
              <el-icon>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-music-note-list" viewBox="0 0 16 16">
                  <path d="M12 13c0 1.105-1.12 2-2.5 2S7 14.105 7 13s1.12-2 2.5-2 2.5.895 2.5 2"/>
                  <path fill-rule="evenodd" d="M12 3v10h-1V3z"/>
                  <path d="M11 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 16 2.22V4l-5 1z"/>
                  <path fill-rule="evenodd" d="M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5"/>
                </svg>
              </el-icon>
              扬声器测试
            </h3>
            <div class="section-status">
              <el-icon class="status-icon success">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                  <path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
                </svg>
              </el-icon>
              <span class="status-text">可用</span>
            </div>
          </div>

          <el-row :gutter="24">
            <el-col :span="8">
              <div class="control-panel">
                <div class="speaker-info">
                  <el-icon class="device-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-music-note-list" viewBox="0 0 16 16">
                      <path d="M12 13c0 1.105-1.12 2-2.5 2S7 14.105 7 13s1.12-2 2.5-2 2.5.895 2.5 2"/>
                      <path fill-rule="evenodd" d="M12 3v10h-1V3z"/>
                      <path d="M11 2.82a1 1 0 0 1 .804-.98l3-.6A1 1 0 0 1 16 2.22V4l-5 1z"/>
                      <path fill-rule="evenodd" d="M0 11.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 7H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5m0-4A.5.5 0 0 1 .5 3H8a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5"/>
                    </svg>
                  </el-icon>
                  <div class="info-content">
                    <span class="info-title">扬声器测试</span>
                    <span class="info-desc">播放测试音频检查扬声器</span>
                  </div>
                </div>
              </div>
            </el-col>

            <el-col :span="16">
              <div class="device-section">
                <div class="audio-player-container">
                  <div class="player-header">
                    <span class="player-title">测试音频</span>
                  </div>
                  <div class="audio-player-wrapper">
                    <audio
                        :src="testAudio"
                        controls
                        class="audio-player"
                        preload="metadata"
                    />
                    <div class="player-tips">
                      <el-icon class="tip-icon"><Warning /></el-icon>
                      <span>请调整音量到合适大小，确保能清晰听到测试音频</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

.privacy-settings-container {
  font-family: 'Noto Sans SC', sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  &.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .header-left {
      flex: 1;

      .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0 0 8px;

        .title-icon {
          font-size: 28px;
          color: #409eff;
        }
      }

      .section-description {
        font-size: 16px;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
      }
    }

    .header-right {
      .completion-indicator {
        display: flex;
        align-items: center;
        gap: 15px;

        .completion-circle {
          position: relative;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: conic-gradient(#409eff 0% var(--progress), #e5e7eb var(--progress) 100%);
          display: flex;
          align-items: center;
          justify-content: center;

          &::before {
            content: '';
            position: absolute;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: white;
          }

          .completion-text {
            position: relative;
            font-size: 12px;
            font-weight: 700;
            color: #409eff;
            z-index: 1;
          }
        }

        .completion-info {
          display: flex;
          flex-direction: column;
          gap: 2px;

          .completion-label {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
          }

          .completion-detail {
            font-size: 16px;
            color: #2c3e50;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.form-container {
  .privacy-form {
    .form-section {
      background: #ffffff;
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        border-color: #d1d5db;
      }

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .section-subtitle {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #374151;
          margin: 0;

          .el-icon {
            font-size: 20px;
            color: #409eff;
          }
        }

        .section-status {
          display: flex;
          align-items: center;
          gap: 6px;

          .status-icon {
            font-size: 16px;

            &.success {
              color: #10b981;
            }

            &.warning {
              color: #f59e0b;
            }
          }

          .status-text {
            font-size: 14px;
            font-weight: 500;
            color: #6b7280;
          }
        }
      }

      .control-panel {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 100%;

        .switch-item {
          margin-bottom: 0;

          .switch-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 8px;
            border: 1px solid #e2e8f0;

            .device-icon {
              font-size: 20px;
              color: #409eff;
            }

            .switch-content {
              flex: 1;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .switch-label {
                font-size: 14px;
                font-weight: 600;
                color: #374151;
              }

              .custom-switch {
                :deep(.el-switch__core) {
                  border-color: #d1d5db;

                  &.is-checked {
                    border-color: #409eff;
                    background-color: #409eff;
                  }
                }
              }
            }
          }
        }

        .detect-button,
        .test-button {
          display: flex;
          align-items: center;
          gap: 6px;
          justify-content: center;
          padding: 10px 16px;
          font-weight: 500;
          border-radius: 6px;
          transition: all 0.3s ease;

          &:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
        }

        .test-controls {
          margin-top: auto;
        }

        .speaker-info {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 16px;
          background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
          border-radius: 8px;
          border: 1px solid #e2e8f0;

          .device-icon {
            font-size: 20px;
            color: #409eff;
          }

          .info-content {
            display: flex;
            flex-direction: column;
            gap: 4px;

            .info-title {
              font-size: 14px;
              font-weight: 600;
              color: #374151;
            }

            .info-desc {
              font-size: 12px;
              color: #6b7280;
            }
          }
        }
      }

      .device-section {
        .device-select-item {
          margin-bottom: 20px;

          .device-label {
            display: block;
            font-weight: 600;
            color: #374151;
            font-size: 14px;
            margin-bottom: 8px;
          }

          .device-select {
            width: 100%;

            :deep(.el-select__wrapper) {
              height: 44px;
              border-radius: 8px;
              border: 2px solid #e5e7eb;
              transition: all 0.3s ease;

              &:hover {
                border-color: #d1d5db;
              }

              &.is-focused {
                border-color: #409eff;
                box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
              }
            }
          }
        }

        .preview-container,
        .audio-visualizer-container,
        .audio-player-container {
          background: #f8fafc;
          border-radius: 8px;
          padding: 16px;
          border: 1px solid #e2e8f0;

          .preview-header,
          .visualizer-header,
          .player-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .preview-title,
            .visualizer-title,
            .player-title {
              font-size: 14px;
              font-weight: 600;
              color: #374151;
            }

            .visualizer-status {
              font-size: 12px;
              color: #6b7280;
              padding: 2px 8px;
              border-radius: 4px;
              background: #e5e7eb;

              &.active {
                background: #dcfce7;
                color: #16a34a;
              }
            }
          }

          .video-wrapper {
            position: relative;
            border-radius: 6px;
            background: #000;

            .video-preview {
              width: 100%;
              max-width: 100%;
              object-fit: cover;
              border-radius: 6px;

              &.inactive {
                filter: brightness(0.3);
              }
            }

            .overlay-message {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 8px;
              color: white;
              text-align: center;

              .overlay-icon {
                font-size: 32px;
                opacity: 0.8;
              }

              span {
                font-size: 14px;
                font-weight: 500;
              }
            }
          }

          .visualizer-wrapper {
            position: relative;
            height: 120px;
            border-radius: 6px;
            overflow: hidden;
            background: #1f2937;

            .audio-visualizer {
              width: 100%;
              height: 100%;
            }

            .visualizer-overlay {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 8px;
              color: #9ca3af;
              text-align: center;

              .overlay-icon {
                font-size: 24px;
              }

              span {
                font-size: 12px;
              }
            }
          }

          .audio-player-wrapper {
            .audio-player {
              width: 100%;
              height: 40px;
              border-radius: 6px;
              outline: none;

              &::-webkit-media-controls-panel {
                background-color: #374151;
              }
            }

            .player-tips {
              display: flex;
              align-items: center;
              gap: 6px;
              margin-top: 8px;
              padding: 8px 12px;
              background: rgba(245, 158, 11, 0.1);
              border: 1px solid rgba(245, 158, 11, 0.3);
              border-radius: 6px;

              .tip-icon {
                font-size: 14px;
                color: #f59e0b;
              }

              span {
                font-size: 12px;
                color: #92400e;
              }
            }
          }
        }
      }
    }
  }
}

// Responsive Design
@media (max-width: 1024px) {
  .settings-header {
    .header-content {
      flex-direction: column;
      gap: 20px;

      .header-right {
        align-self: flex-start;
      }
    }
  }

  .form-container {
    .privacy-form {
      .form-section {
        padding: 20px;

        .el-row {
          .el-col {
            &:first-child {
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .settings-header {
    .header-content {
      .header-left {
        .section-title {
          font-size: 20px;

          .title-icon {
            font-size: 24px;
          }
        }

        .section-description {
          font-size: 14px;
        }
      }

      .header-right {
        .completion-indicator {
          .completion-circle {
            width: 50px;
            height: 50px;

            &::before {
              width: 36px;
              height: 36px;
            }

            .completion-text {
              font-size: 10px;
            }
          }
        }
      }
    }
  }

  .form-container {
    .privacy-form {
      .form-section {
        padding: 15px;
        margin-bottom: 20px;

        .section-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;

          .section-subtitle {
            font-size: 16px;
          }
        }

        .control-panel {
          gap: 15px;

          .switch-wrapper {
            padding: 12px;

            .switch-content {
              .switch-label {
                font-size: 13px;
              }
            }
          }

          .detect-button,
          .test-button {
            padding: 8px 12px;
            font-size: 13px;
          }
        }

        .device-section {
          .preview-container,
          .audio-visualizer-container,
          .audio-player-container {
            padding: 12px;

            .video-wrapper {
              .video-preview {
                height: 150px;
              }
            }

            .visualizer-wrapper {
              height: 80px;
            }
          }
        }
      }
    }
  }
}
</style>